<template>
	<view class="tui-center">
		<uni-nav-bar fixed left-icon="back" title="实名认证" @clickLeft="clickLeft()"></uni-nav-bar>
		<view class="tui-real-pro">
			<image src="../../static/image/icon/real.png" mode="" class="tui-align-image"></image>
			<view class="tui-align-center">
				<text>完成身份验证，可核对真实身份，保障合法权益</text>
			</view>
		</view>
		<view>
			<view class="row br-b">
				<text class="tui-necessary">*</text>
				<text class="tit">真实姓名:</text>
				<input class="input" type="text" v-model="addressData.name" placeholder="请填写真实姓名" placeholder-class="placeholder" />
			</view>
			<view class="row br-b">
				<text class="tui-necessary">*</text>
				<text class="tit">身份证号:</text>
				<input class="input" type="text" v-model="addressData.idCard" placeholder="请填写身份证号" placeholder-class="placeholder" />
			</view>
			<view class="row br-b">
				<text class="tui-necessary">*</text>
				<text class="tit">手机号:</text>
				<input class="input" type="text" v-model="addressData.phone" placeholder="请填写手机号" placeholder-class="placeholder" />
				<button type="primary" size="mini" :loading="phoneLoading" :disabled="phoneDisabled"
					@click="sendCode" style="width: 290rpx;font-size: 26rpx;background: #6CB041;">
					{{phoneText}}
				</button>
			</view>
			<view class="row">
				<text class="tui-necessary">*</text>
				<text class="tit">验证码:</text>
				<input class="input" type="text" v-model="addressData.smsCode" placeholder="请填写验证码" placeholder-class="placeholder" />
			</view>
			<button class="add-btn" type="primary" :loading="btnLoading" @click="confirm">提交认证</button>
		</view>
	</view>
</template>

<script>

	export default {
		data() {
			return {
				addressData: {
					name: undefined,
                    idCard: undefined,
                    phone: undefined,
                    smsCode: undefined
				},
				phoneLoading: false,
				phoneDisabled: true,
				btnLoading: false,
                phoneText: '发送验证码'
			}
		},
		watch: {
			addressData: {
				handler: function(val) {
				let reg = /^[1][0-9]{10}$/;
					if (!reg.test(val.phone)) {
						this.phoneDisabled = true
					} else {
						if (!this.timer) {
						this.phoneDisabled = false
						}
					}
				},
				deep: true
			}
		},
		methods: {
			sendCode() {
				if(!/(^1[3|4|5|7|8][0-9]{9}$)/.test(this.addressData.phone)){
                    this.$api.msg('请输入正确的手机号')
					return;
				}
				if (this.addressData.phone) {
					this.phoneLoading = true
					this.phoneDisabled = true
					this.setTime(60)
				} else {
					this.phoneLoading = false
					return false
				}
			},
			confirm() {
				let data = this.addressData
				if(!data.name){
					uni.showModal({ content: '请填写真实姓名', showCancel: false });
					return;
				}
				if(!data.idCard){
					uni.showModal({ content: '请填写身份证号', showCancel: false });
					return;
				}
				if(!/(^1[3|4|5|7|8][0-9]{9}$)/.test(data.phone)){
					uni.showModal({ content: '请输入正确的手机号码', showCancel: false });
					return;
				}
				if(!data.smsCode){
					uni.showModal({ content: '验证码不能为空', showCancel: false });
					return;
				}
                this.btnLoading = true
                this.$api.api('user.verified', this.addressData).then(res => {
                    this.btnLoading = false
                    this.$api.msg('提交成功')
                    this.phoneText = '发送验证码'
                }).catch(error => {
                    this.btnLoading = false
                    this.$api.msg(error.message)
                });

			},
			setTime(time) {
				if (time <= 0) {
					this.phoneText = '重新获取'
                    this.phoneDisabled = false
					this.phoneLoading = false
					clearTimeout(this.timer)
					return
				}
				this.phoneText = `还剩${time}s`
				this.timer = setTimeout(() => {
					this.phoneLoading = false
					time--
					this.setTime(time)
				}, 1000)
			},
            clickLeft() {
                uni.navigateBack()
            }
		}
	}
</script>

<style lang="scss">
	.tui-real-pro {
		margin: 0 auto;
		text-align: center;
		padding: 60rpx;
		.tui-align-image {
			width: 330rpx;
			height: 280rpx;
		}
		.tui-align-center {
			width: 460rpx;
			margin: 0 auto;
			font-size: $uni-font-size-md;
		}
	}
	.row {
		height: 100rpx;
		background-color: $uni-bg-color;
		position: relative;
		padding: 0 20rpx;
		display: flex;
		align-items: center;
		.tui-necessary {
			color: $uni-color-error;
			font-size: $uni-font-size-lg;
			margin-right: 8rpx;
		}
		.tit {
			width: 150rpx;
			flex-shrink: 0;
			font-size: $uni-font-size-md;
		}
		.input {
			font-size: 28rpx;
		}
		.placeholder {
			font-size: $uni-font-size-md;
		}
	}
	.add-btn {
		margin-top: 100rpx;
		font-size: 36rpx;
		background: #6CB041;
	}
</style>
